import { useAppSelector } from '@/store';
import ArticleList from './components/ArticleList';
import Channel from '@/components/Channel';
import styles from './index.module.scss';

export default function Home() {
  const { channel_id: activeId, userList } = useAppSelector(
    (state) => state.channel
  );
  console.log(userList, activeId);

  return (
    <div className={styles.root}>
      <Channel />
      {userList.map((item) => {
        return (
          <div
            className="channel-list"
            key={item.id}
            // 3. channel-list身上有滚动条，要生成多个
            style={{ display: item.id !== activeId ? 'none' : 'block' }}
          >
            <ArticleList channel_id={item.id} />
          </div>
        );
      })}
    </div>
  );
}
